<template>
  <div class="home">
    <!-- 登陆状态 -->
    <HandDrawnCard variant="default" size="medium">
      <div v-loading="stateLoding" v-show="loginDialogVisible" class="login-status">
        <h1>
          <el-icon>
            <SuccessFilled />
          </el-icon>
          <span>已登录</span>
        </h1>

        <div class="button-group">
          <HandDrawnCard size="small" @click="checkLogin">
            <div class="hand-drawn-button">
              <el-icon> <SuccessFilled /> </el-icon>检查
            </div>
          </HandDrawnCard>
          <HandDrawnCard variant="secondary" size="small" @click="logout">
            <div class="hand-drawn-button">
              <el-icon> <DeleteFilled /> </el-icon>注销
            </div>
          </HandDrawnCard>
        </div>
      </div>
      <Login v-show="!loginDialogVisible" v-model:visible="loginDialogVisible" />
    </HandDrawnCard>
    <!-- 交易市场 -->
    <HandDrawnCard variant="secondary" size="medium">
      <h1>
        <el-icon> <UploadFilled /> </el-icon>交易市场
      </h1>
      <div>
        <span class="desc">交易市场，自由拍卖。</span>
      </div>
      <div class="center">
        <HandDrawnCard
          variant="primary"
          size="small"
          @click="navigateTo('/trade/TradePage')"
        >
          <div>
            立即前往
            <el-icon>
              <CaretRight />
            </el-icon>
          </div>
        </HandDrawnCard>
      </div>
    </HandDrawnCard>
    <!-- 创意工坊 -->
    <HandDrawnCard variant="primary" size="medium">
      <h1>
        <el-icon> <UploadFilled /> </el-icon>创意工坊
      </h1>
      <div>
        <span class="desc"
          >创意工坊可以将你的创意自由地发布到游戏中,公开给其他玩家使游戏内容变得更加丰富。</span
        >
      </div>
      <div class="center">
        <HandDrawnCard
          variant="accent"
          size="small"
          @click="navigateTo('/create/CreatePage')"
        >
          <div>
            立即前往
            <el-icon>
              <CaretRight />
            </el-icon>
          </div>
        </HandDrawnCard>
      </div>
    </HandDrawnCard>


    <!-- 邮件系统 -->
    <HandDrawnCard variant="accent" size="medium">
      <h1>
        <el-icon> <Message /> </el-icon>邮件系统
      </h1>
      <div>
        <span class="desc">发送邮件给其他玩家，支持附加物品和游戏道具。</span>
      </div>
      <div class="center">
        <HandDrawnCard
          variant="default"
          size="small"
          @click="navigateTo('/mail/SendMail')"
        >
          <div>
            发送邮件
            <el-icon>
              <CaretRight />
            </el-icon>
          </div>
        </HandDrawnCard>
      </div>
    </HandDrawnCard>
  </div>

  <HandDrawnCard>
    <a href="https://beian.miit.gov.cn/" target="_blank">备案号:沪ICP备2024103796号-1</a>
  </HandDrawnCard>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Login from "@/components/Login.vue";
import HandDrawnCard from "@/components/HandDrawnCard.vue";
import router from "@/router";
import { callApi } from "@/tool/server";
import { ElIcon } from "element-plus";
import { Brush, Bell, CaretRight } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import { HandDrawnMessageBox } from "@/tool/handDrawnConfirm";

@Options({
  components: {
    Login,
    HandDrawnCard,
    ElIcon,
    Brush,
    Bell,
    CaretRight,
  },
})
export default class HomeView extends Vue {
  loginDialogVisible = false;
  stateLoding = false;
  store = useStore();

  mounted() {
    this.store.dispatch("initializeToken");
    this.loginDialogVisible = this.store.getters.isAuthenticated;
  }

  navigateTo(route: string) {
    router.push(route);
  }

  navigateToExternal(url: string) {
    window.open(url, "_blank");
  }

  checkLogin = async () => {
    this.stateLoding = true;
    const res = await callApi("Check", { _token: this.store.getters.token });
    setTimeout(() => {
      this.stateLoding = false;
    }, 500);
    if (res) {
      this.loginDialogVisible = res.judge;
      return res.judge;
    }
    this.loginDialogVisible = false;
    return false;
  };

  login() {
    this.loginDialogVisible = true;
  }

  logout() {
    this.loginDialogVisible = false;
    this.store.commit("clearToken");
  }

  async testConfirmDialog() {
    try {
      const confirmed = await HandDrawnMessageBox.question(
        "这是一段测试文字，用于展示手绘风格的确认对话框效果。",
        "测试确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      );

      if (confirmed) {
        console.log("用户点击了确定");
      } else {
        console.log("用户点击了取消");
      }
    } catch (error) {
      console.log("对话框被关闭");
    }
  }
}
</script>

<style scoped>
body {
  background-color: #f0f2f5;
}

.home {
  position: relative;
  min-height: 100vh;
  padding-bottom: 50px;
  /* Footer height */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #e0e7ff;
  /* 更好看的颜色 */
}

.login-status {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-text span {
  margin-left: 10px;
}

.button-group {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 4px;
}

.hand-drawn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}

.hand-drawn-button {
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  padding: 1px 6px;
  background: transparent;
  border-radius: 3px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  min-width: 70px;
  line-height: 1;
}

.hand-drawn-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.hand-drawn-button:hover::before {
  transform: translateX(100%);
}

.hand-drawn-button:hover {
  transform: translateY(-1px);
  color: #d2691e;
}

.hand-drawn-button:active {
  transform: translateY(0);
  color: #8b4513;
}

.center {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
</style>
